<template>
    <div>
        <div class="head flex flex-align-center">
            <p style="margin-left:0.4rem;margin-right:3.2rem">已登录IM系统</p>
            <p class="userNmae">用户：{{$store.state.user}}</p>
        </div>
        <div class="msgBox" id="dialogue_box">
            <div class="item" v-for="(item,index) in $store.state.sessin" :key="index">
                <div class="time">{{item.time | time}}</div>
                <div class="msg-cont " :class="{'msg-cont-self':item.self}">{{item.message}}</div>
            </div>
        </div>
        <div class="sendBox flex flex-align-center">
            <input type="text" class="toUser" placeholder="发送给" v-model="toUser">
            <input type="text" class="msgI" placeholder="输入消息内容" v-model="message">
            <div class="sendBtn flex flex-align-center flex-pack-center" @click="onSendFun"><p>发送</p></div>
        </div>
    </div>
</template>
<script>
import IMConf from '../assets/js/ImSDKConfig'
export default {
    data(){
        return {
            toUser:'',
            message:'',
        }
    },
    methods(){
        this.updated();
    },
    filters:{
           // 将日期过滤为 hour:minutes
        time (date) {
            if (typeof date === 'string') {
                date = new Date(date);
            }
            return date.getHours() + ':' + date.getMinutes();
        }
    },
    methods:{
        onSendFun(){
             var p = createCommonData(this.message, IMSDK.getLoginInfo().loginUserId, this.toUser);
             this.message = '';
             IMConf.showChatMessage(p);
             IMSDK.sendData(p);
             this.updated();
        },
        updated:function(){
            this.$nextTick(function(){
                var div = document.getElementById('dialogue_box');
                    div.scrollTop = div.scrollHeight;
            })
        }
    },
}
</script>
<style  scoped>
.item{
    min-height: 1.5rem ;
    padding: 0.2rem;
}
.msg-cont{
    width: auto;
    min-width: 1rem !important;
    max-width: 6.5rem;
    min-height: 0.8rem;
    border:solid 1px #ddd;
    border-radius: 7px 7px 7px 0px;
    float: left;
    font-size: 0.34rem;
    padding: 0.2rem;
    display: block;
    word-break: break-all; word-wrap:break-word;
}
.msg-cont-self{
    float: right;
    border-radius: 7px 7px 0px 7px;
    background: green;
    color: #fff;
    border:none;
}
.head{
    height: 1rem;
    background: #999;
    color:#fff;
}
.userNmae{
    font-size: 0.26rem
}
.msgBox{
    height: 11rem;
    overflow: auto;
    border-bottom: 2px solid #ddd;
    background: #f5f5f5;
}
.sendBox{
    height: 1.25rem;
}
.toUser{
    height: 0.6rem;
    width: 1.8rem;
    margin:0 0.1rem 0 0.2rem;
    border:solid 1px #ddd;
    border-radius: 15px;
}
.msgI{
   height: 0.6rem;
   width: 4rem; 
   border:solid 1px #ddd;
   border-radius: 15px;
   margin-right: 0.1rem;
}
.sendBtn{
    height: 0.6rem;
    width: 1.2rem;
    border-radius: 15px;
    background: green;
    color: #fff;
    cursor: pointer;
}
</style>



